/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-form-item>
        <el-button type="primary" @click="addRiskRule">+  新增引擎规则</el-button>
      </el-form-item>
      <el-form-item label="引擎规则名称">
        <el-input v-model="formInline.ruleName" placeholder="引擎规则名称"></el-input>
      </el-form-item>
      <el-form-item label="对象类型">
        <el-select
          v-model="formInline.objectType"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsList"
            :key="item.id"
            :label="item.itemObjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select
          v-model="formInline.isReady"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="ruleName" label="引擎规则名称" min-width="100" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="objectType" label="对象类型" v-if="optionsList">
        <template v-slot="scope">
          {{ getObjectType(scope.row.objectType) }}
        </template>
      </el-table-column>
      <el-table-column label="引擎规则内容" min-width="150" :show-overflow-tooltip="true">
        <template v-slot="scope">
          {{ getRuleContent(scope.row.itemList) }}
        </template>
      </el-table-column>
      <el-table-column prop="isReady" label="是否启用" width="150" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.isReady === '1'">是</span>
          <span v-else style="color: red">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="200"></el-table-column>
      <el-table-column prop="isUsing" label="使用状态" width="100">
        <template v-slot="scope">
          <span v-if="scope.row.isUsing === '1'" style="color: green">使用中</span>
          <span v-else>未使用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="scope">
          <el-button class="common-btn" @click="editRule(scope.row)">编辑</el-button>
          <el-button class="delete-btn" @click="stopItem(scope.row)" v-if="scope.row.isReady === '1'">禁用</el-button>
          <el-button class="common-btn" @click="startRule(scope.row)" v-else>启用</el-button>
          <el-button class="common-btn" @click="detailRule(scope.row)">详情</el-button>
          <el-button class="delete-btn" @click="deleteRule(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      :page-size="formInline.pageSize"
      layout="total, sizes, pager, next, jumper"
      @current-change="refreshPageByCondition"
      @size-change="handleSizeChange"
      :current-page.sync="formInline.pageNumber"
      :total="total">
    </el-pagination>
    <ruleDialog v-if="RuleDialogShow"
    :RuleDialogShow="RuleDialogShow"
    :ruleParam="ruleParam"
    @closeDialog="closeDialog"
    @inputData="inputData"></ruleDialog>
    <confirmStopDialog v-if="ConfirmDialogShow"
       :ConfirmDialogShow="ConfirmDialogShow"
       @closeDialog="closeConfirmDialog"
       @selectData="confirmDialogSubmit"></confirmStopDialog>
  </div>
</template>

<script>
import {addRiskRule, updateRiskRule, getRiskRuleQuery, startRiskRule, stopRiskRule, deleteRiskRule} from '../../api/risk/riskRule'
import ruleDialog from "./ruleDialog";
import confirmStopDialog from "./confirmStopDialog";
import {getItemDictObject} from "../../api/risk/commonDict";
export default {
  components:{
    ruleDialog,
    confirmStopDialog
  },
  data() {
    return {
      option:[],
      tableData: [],
      optionsList:[],
      formInline: {
        ruleName: '',
        isReady:'',
        pageSize: 10,
        pageNumber: 1
      },
      ruleParam: {},
      total: 0,
      actionParam: {
        ruleId: '',
        action: '',
        actionReason: ''
      },
      RuleDialogShow: false,
      ConfirmDialogShow: false,
      options:[
        {
          name:'是',
          value:'1'
        },
        {
          name:'否',
          value:'0'
        },
      ]
    };
  },
  mounted() {
    this.getInit()
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getInit()
    },
    addRiskRule(){
      this.ruleParam.type = 'add'
      this.ruleParam.ruleId = ''
      this.ruleParam.ruleName = ''
      this.ruleParam.objectType = ''
      this.ruleParam.ruleContent = ''
      this.ruleParam.itemList = []
      this.RuleDialogShow = true
    },
    reset() {
      this.formInline.ruleName = ''
      this.formInline.objectType = ''
      this.formInline.isReady = ''
      this.refreshPageByCondition()
    },
    editRule(rule){
      this.ruleParam.type = 'edit'
      this.showDialogWithParam(rule)
    },
    detailRule(rule){
      this.ruleParam.type = 'detail'
      this.showDialogWithParam(rule)
    },
    deleteRule(rule) {
      this.$confirm('此操作将删除该引擎规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRiskRule({ruleId:rule.id}).then((res)=>{
          if(res && res.code === 200) {
            this.$message({message: '删除成功', type: 'success'})
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      })
    },
    showDialogWithParam(rule) {
      this.ruleParam.ruleId = rule.id
      this.ruleParam.ruleName = rule.ruleName
      this.ruleParam.objectType = rule.objectType
      this.ruleParam.ruleContent = rule.ruleContent
      this.ruleParam.itemList = rule.itemList
      this.RuleDialogShow = true
    },
    getRuleContent(list) {
      let content = ''
      list.forEach(item => {
        content += item.itemSymbol + item.itemName + '*' + item.powerValue
      })
      return content.substring(1)
    },
    startRule(rule){
      this.actionParam.ruleId = rule.id
      this.actionParam.action = 'start'
      startRiskRule(this.actionParam).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '启用成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      });
    },
    stopItem(rule){
      this.ConfirmDialogShow = true
      this.actionParam.ruleId = rule.id
      this.actionParam.action = 'stop'
    },
    closeDialog() {
      this.RuleDialogShow = false
    },
    closeConfirmDialog() {
      this.ConfirmDialogShow = false
    },
    inputData(val) {
      //监听“弹窗组件”返回的数据
      let params = {
        ruleName: val.ruleName,
        objectType: val.objectType,
        ruleContent: val.ruleContent,
        itemList: val.itemList
      }
      if (val.type === 'add') {
        addRiskRule(params).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '新增成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      } else if (val.type === 'edit') {
        params.ruleId = val.ruleId
        updateRiskRule(params).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '更新成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      }
    },
    confirmDialogSubmit(val) {
      //监听“弹窗组件”返回的数据
      this.actionParam.actionReason = val
      stopRiskRule(this.actionParam).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '禁用成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      });
    },
    getInit(){
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
      this.refreshPageByInit()
    },
    getObjectType(type) {
      if (this.optionsList && this.optionsList.length > 0) {
        return this.optionsList.find(item => item.id === type).itemObjectName
      }
      return ''
    },
    search() {
      this.refreshPageByCondition()
    },
    refreshPageByInit() {
      this.refreshPage({page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize})
    },
    refreshPageByCondition() {
      let params = {
        ruleName: this.formInline.ruleName,
        objectType: this.formInline.objectType,
        isReady: this.formInline.isReady,
        source: 'web',
        page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize
      }
      this.refreshPage(params)
    },
    refreshPage(params) {
      getRiskRuleQuery(params).then((res)=>{
        if(res){
          this.tableData = res.ruleList
          this.total = res.ruleListSize
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      });
    }
  }
};

</script>

<style scoped>

</style>
